<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="">
			<u-navbar :isBack="false">
				<view class="w-100 flex">
					<view class="ml-2 flex justify-center align-center" @click.stop="clickRefresh">
						<image src="/static/images/refresh.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view class="w-100 flex justify-center align-center" @click.stop="selectWeek">
						<text class="font-weight-bold">第{{nowWeek}}周</text>
						<uni-icons type="down" class="ml-1"></uni-icons>
					</view>
				</view>
			</u-navbar>
		</view>

		<view class="container">
			<view class="week-list">
				<view class="now-month">
					<text>{{nowMonth<10?'0'+nowMonth:nowMonth}}</text>
					<text>月</text>
				</view>
				<view class="week-item" :class="[(nowMonth==todayMonth && todayDay==weekCalendar[index])?'active':'']"
					v-for="(item,index) in weekDayCount" :key="index">
					<text class="week-name">周{{weekIndexText[index]}}</text>
					<text
						class="week-date">{{ weekCalendar[index]==1?(nowMonth==12?1:(nowMonth+1))+'月':(weekCalendar[index]<9?'0':'')+weekCalendar[index]+'日'}}</text>
				</view>
			</view>


			<view class="course-content">
				<view class="course-nums">
					<view class="course-num" v-for="(item,index) in 12" :key="index">
						{{index+1>9 ? index+1:'0'+(index+1)}}
					</view>
				</view>
				<swiper duration="firstEntry?0:300" circular class="course-swiper" @change="swiperSwitchWeek"
					:current="nowWeek-1">
					<swiper-item v-for="(item1,weekIndex) in totalWeek" :key="weekIndex">
						<view class="course-list">
							<view class="course-item" @click="navCourseDetail(index)"
								v-if="item.weeks.indexOf(weekIndex+1)>-1" v-for="(item,index) in courseList"
								:key='index'
								:style="{top:(item.section-1)*60+'px',left:(item.week-1)*((windowWidth-25)/7)+'px',height: item.sectionCount*60+'px'}">
								<view class="course-item__content" :style="{backgroundColor: courseColor[item.name] }">
									{{item.name}}@{{item.address?item.address:"未知"}}
								</view>
							</view>
						</view>
					</swiper-item>

				</swiper>
			</view>
		</view>


		<uni-popup ref="popup" type="bottom">
			<view class="w-100" style="position: fixed;bottom: 0;left: 0;z-index: 10001;">
				<view class="bg-white" style="border-radius: 30rpx 30rpx 0 0;">
					<view class="switch-week__popup">
						<view class="switch-week__title">切换周期</view>
						<view class="switch-week__list">
							<view class="switch-week__item" v-for="(item,index) in totalWeek" :key="index"
								@click="switchWeek(index+1)">
								<view class="switch-week__item-box border" :class="[nowWeek===index+1?'active':'']"
									@click="closePopup">
									{{index+1}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="" style="height: 100rpx;"></view>
				<!-- #endif -->
			</view>

		</uni-popup>


	</view>
</template>

<script>
	import {
		getNowWeek
	} from "@/utils/util.js"
	import {
		getCourseListRequest
	} from '@/api/main.js'
	const courseCachKey = 'courses'
	const courseColorCacheKey = "courseColor"
	export default {
		data() {
			return {
				todayMonth: '',
				todayDay: '',
				windowWidth: 0,
				startDate: '2023/02/20', //开学日期
				nowMonth: 1, //当前月份
				weekCalendar: [1, 2, 3, 4, 5, 6, 7], //星期日历
				weekDayCount: 7, //星期天数
				weekIndexText: ['一', '二', '三', '四', '五', '六', '日'],
				nowWeek: 1, //当前周
				totalWeek: 20, //周总数
				// courseList: [{
				// 		name: '网络工程',
				// 		week: 2,
				// 		section: 1,
				// 		sectionCount: 1,
				// 		address: '博雅楼302',
				// 		color: '#d06969'
				// 	},
				// 	{
				// 		name: '大学体育1',
				// 		week: 2,
				// 		section: 3,
				// 		sectionCount: 2,
				// 		address: '篮球场',
				// 		color: '#86d069'
				// 	},
				// 	{
				// 		name: '马克思列宁主义很长的名字我也不知道怎么办',
				// 		week: 3,
				// 		section: 5,
				// 		sectionCount: 4,
				// 		address: '信达楼392',
				// 		color: '#ae69d0'
				// 	},
				// ],
				courseList: [],
				colorList: [
					"#116A7B", "#DD58D6", "#30A2FF", "#0079FF", "#F79327", "#47A992", "#7A3E3E", "#FF55BB",
					"#A0D8B3", "#539165", "#3A98B9", "#609966",
				],
				courseColor: {},
				firstEntry: true
			}
		},
		computed: {
			// formatWeekDay(index) {
			// 	console.log(index);
			// 	// (weekCalendar[index]<9?'0':'')+weekCalendar[index]
			// 	return 123
			// }
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth;
					// console.log(this.windowWidth);
				}
			})

			// console.log(this.getDateObject());
			this.getWeekDates()
			this.getData()
			this.update(true)
			this.getTodayDate()
		},
		methods: {
			navCourseDetail(index) {
				uni.navigateTo({
					url: `/pages/course-detail/course-detail?info=${JSON.stringify(this.courseList[index])}`
				})
			},
			swiperSwitchWeek(e) {
				console.log(e);
				if (e.detail.source = '') {
					this.firstEntry = false
					return
				}
				const weekIndex = e.detail.current + 1
				this.switchWeekFn(weekIndex)
			},
			getData() {
				const cache = uni.getStorageSync(courseCachKey)
				const courseColorCache = uni.getStorageSync(courseColorCacheKey)
				if (cache) {
					this.courseList = cache
					return
				}
				if (!courseColorCache) {
					this.buildCouseColor()
				} else {
					console.log(this.courseColor);
					console.log(courseColorCache);
					this.courseColor = courseColorCache
				}
				this.update(true)
			},
			update(firstEntry = false) {
				getCourseListRequest().then(res => {
					this.buildCouseColor()
					if (!firstEntry) {
						uni.showToast({
							title: "更新成功",
							icon: "success"
						})
					}

					// console.log(res);
					this.courseList = res.data
					uni.setStorageSync(courseCachKey, res.data)
				})
			},
			buildCouseColor() {
				let colorIndex = 0
				this.courseList.map(item => {
					// console.log(item);
					if (this.courseColor[item.name] === undefined) {
						this.courseColor[item.name] = this.colorList[colorIndex]
						colorIndex++
					}
				})
				uni.setStorageSync(courseColorCacheKey, this.courseColor)
			},
			closePopup() {
				this.$refs.popup.close()
			},
			switchWeek(e) {
				// console.log(e);
				this.switchWeekFn(e)
			},
			// 切换周数
			switchWeekFn(week) {
				this.nowWeek = week
				this.getWeekDates()
			},
			clickRefresh() {
				this.update();
			},
			selectWeek() {
				console.log('selectWeek');
				this.$refs.popup.open()
			},
			// 获取一周七天的，7个日期数字
			getWeekDates() {
				const _that = this
				const startDate = new Date(this.startDate)
				const addTime = (this.nowWeek - 1) * 7 * 24 * 60 * 60 * 1000
				const firstDate = startDate.getTime() + addTime
				const {
					month
				} = this.getDateObject((new Date(firstDate)))
				this.nowMonth = month
				this.weekCalendar = []
				for (let i = 0; i < this.weekDayCount; i++) {
					const date = new Date(firstDate + i * 24 * 60 * 60 * 1000)
					const {
						day
					} = _that.getDateObject(date)
					_that.weekCalendar.push(day)
				}
				// console.log(_that.weekCalendar);
			},
			getDateObject(date = new Date('2023/06/20')) {
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return {
					year,
					month,
					day
				}
			},
			getNowWeek() {
				this.nowWeek = getNowWeek(this.startDate, this.totalWeek)
				this.getWeekDates()

				// 未写到工具utils中前
				// const nowDate = new Date().getTime()
				// const startDate = new Date(this.startDate).valueOf()
				// const time = nowDate - startDate
				// const week = Math.ceil(time / 1000 / 60 / 60 / 24 / 7)
				// this.nowWeek = week
				// this.getWeekDates()

				// // console.log(nowDate);
				// // console.log(startDate);
				// // console.log(time);
				// // console.log(week)
			},
			getTodayDate() {
				const {
					month,
					day
				} = this.getDateObject()
				this.todayMonth = month
				this.todayDay = day
			}
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.week-active {
		background-color: #40D6B0;
		color: #FFFFFF;
	}

	.container {
		padding: 0;

		.week-list {
			position: fixed;
			left: 0;
			width: 100%;
			height: 92rpx;
			display: flex;
			align-items: center;
			background-color: #f5f7f8;
			z-index: 1;

			.now-month {
				width: 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #666666;
			}

			.week-item {
				width: calc((100% - 50rpx) / 7);
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.week-name {
					font-size: 24rpx;
					text-align: center;
					color: #444444;
				}

				.week-date {
					font-size: 20rpx;
					color: #A1A1A1;
				}
			}

			.active {
				background-color: $uni-color-primary;

				.week-name,
				.week-date {
					color: #Fff,
				}

			}
		}

		.course-content {
			width: 100%;
			padding-top: 92rpx;
			display: flex;

			.course-nums {
				width: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #f5f6f7;

				.course-num {
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.course-swiper {
				width: 100%;
				height: 1500rpx;

				.course-list {
					width: calc((100%-50rpx));
					height: 100%;
					position: relative;

					.course-item {
						position: absolute;
						width: calc((100%-50rpx)/7);
						padding: 2rpx;

						.course-item__content {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}
				}
			}

		}

	}

	.switch-week__popup {
		padding: 30rpx;

		.switch-week__title {
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
		}

		.switch-week__list {
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.switch-week__item {
				width: 120rpx;
				padding: 10rpx;

				.switch-week__item-box {
					weidth: 100%;
					height: 100rpx;
					background-color: #eee;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 12rpx;
				}

				.active {
					background-color: $main-color-primary;
					color: #ffffff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>